<template>
<div class="projectDet">
  <img src="./../assets/product/pCarousel.png" alt="pCarousel" class="pCarousel">
  <h3 class="title">WATER-PROJECT</h3>
  <p class="brif">{{projectDet.name}}</p>
  <div class="content">
    <img src="./../assets/project/projectItem.png" alt="projectItem">
    <div class="pBrief">
      <h4>一、工程概况：</h4>
      <p>孙桥村共有居民5778人，760户，其中外来人口2800余人，占全村人口的46%。孙桥村外来出租户居住人口密集，在靠近家纺市场的周边就住有约1500人，但由于出租户的人口密集、居住条件简陋，卫生条件较差，缺少必要的室内排水设施和卫生设施。大部分出租户的所有生活污水均未经任何处理直接倒入河中。</p>
      <img src="./../assets/project/procedure.png" alt="procedure">
    </div>
    <div class="pResult">
      <h4>二、污水治理效果</h4>
      <img src="./../assets/project/norm.png" alt="norm">
      <img src="./../assets/project/projectDet.png" alt="projectDet">
    </div>
    <div class="pn">
      <span class="first" @click="goPrev">上一个工程：{{projectDet.prev_name}}</span>
      <span @click="goNext">下一个工程：{{projectDet.next_name}}</span>
    </div>
  </div>
</div>
</template>

<script>
export default {
  data () {
    return {
      projectDet: []
    }
  },
  methods :{
    getData() {
      this.$http({
        url: `http://localhost:2000/getjson${this.$route.path}`,
        method: 'get'
      }).then((res) => {
        this.projectDet = res.data;
      }).catch((res) => {
        console.log('error:',res)
      })
    },
    goPrev() {
      let prevId = this.projectDet.prev_id;
      if(prevId !== 'none') {
        this.$router.push({name:'ProjectDet',params:{pro:prevId}})
      }
    },
    goNext() {
       let nextId = this.projectDet.next_id;
      if(nextId !== 'none') {
        this.$router.push({name:'ProjectDet',params:{pro:nextId}})
      }
    }
  },
  beforeRouteUpdate(to, from, next) {
        this.$http({
            url: `http://localhost:2000/getjson${to.path}`,
            method: 'get',
        }).then((res) => {
            this.projectDet = res.data;
        }).catch((res) => {
            console.log('error: ', res);
        });
        next();
    },
  mounted() {
    this.getData()
  }
}
</script>

<style scoped>
.pCarousel {
  width: 100%;
}
.content > img, .pResult > img:nth-child(3) {
  width: 38rem;
  height: 21rem;
  box-shadow:  4px 4px  2px  #8f9181;
}
.content img {
  display: block;
  margin: 2rem auto;
}
.content h4 {
  font-size: 1.3rem;
}
.content p {
  text-indent: 2rem;
  font-size: 1rem;
  padding: 1.5rem 2.5rem;
}
.pn {
  margin: 2rem auto;
  text-align: center;
  color: #000000;
}
.first {
  padding-right: 10rem;
}
.pn>span:hover {
  text-decoration: underline;
  cursor: pointer;
}
</style>
